<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main2.css" rel="stylesheet">
    <link href="css/anim.css" rel="stylesheet">
    <link href="css/responsive2.css" rel="stylesheet">
    
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <body>
<div class="wrapper">
    <nav id="navbar" class="navbar navbar-default navbar-bgcolor">
  	  <div class="container" id="nav-container">
  	    <!-- Brand and toggle get grouped for better mobile display -->
  	    <div class="navbar-header">
  	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  	        <!-- <span class="sr-only">Toggle navigation</span> -->
  	        <span class="icon-bar"></span>
  	        <span class="icon-bar"></span>
  	        <span class="icon-bar"></span>
  	      </button>
  	      <a class="navbar-brand" href="#"><img class="index-logo" src="images/home/logo.png" alt="logo" title="logo"></a>
  	    </div>

  	    <!-- Collect the nav links, forms, and other content for toggling -->
  	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  	      <ul class="nav navbar-nav navbar-right" id="nav-ul-color">
  	        <li><a href="#" id="active-act" class="nav-li-color">首页 <span class="sr-only">(current)</span></a></li>
  	        <li class="dropdown nav-li-color dropdown-hover-li">
              <a href="#" class="dropdown-toggle nav-li-color nav-dropdown-item" >页面 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-hover-menu">
                <li><a href="#">信息建立</a></li>
                <li><a href="#">信息查询</a></li>
                <li><a href="#">信息管理</a></li>
                <li><a href="#">设置</a></li>
              </ul>
            </li>
  	        <li><a href="#" class="nav-li-color">Blog <span class="sr-only">(current)</span></a></li>
            <li id="serach"><a class="index-serach" href="#"></a></li>
            <input type="text" name="serach" class="serach" value="搜索"/>
            <!-- <li class="active2"><span class="index-serach">22</span></li> -->
  	      </ul>
  	      
  	      <!-- <ul class="nav navbar-nav navbar-right">
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="用户名">
              <input type="text" class="form-control" placeholder="注册">
            </div>
            <button type="submit" class="btn btn-default">登录</button>
          </form>
          </ul> -->
  	    </div><!-- /.navbar-collapse -->
  	  </div><!-- /.container-fluid -->
    </nav>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner carousel-bg" role="listbox" id="home-slider">
	    <div class="item active">
        <div class="container main-slider" id="slider">
          <div class="row">
                      <div class="slide-text">
                        <h2>小清新响应式设计网站</h2>
                        <p>利用HTML5，CSS3效果、动画和bootstrap框架制作.</p>
                        <a href="#"><button class="btn-common">登录吧</button></a>
                     </div>
  	                  <img src="images/home/slider/hill.png" class="slider-hill" alt="slider image">
                      <img src="images/home/slider/house.png" class="slider-house" alt="slider image">
                      <img src="images/home/slider/sun.png" class="slider-sun" alt="slider image">
                      <img src="images/home/slider/birds1.png" class="slider-birds1" alt="slider image">
                      <img src="images/home/slider/birds2.png" class="slider-birds2" alt="slider image">
          </div>
        </div>
	      <!-- <div class="carousel-caption">
          <h1>1111111</h1>
        </div> -->
	    </div>
	    <div class="item">
        <div class="container main-slider" id="slider">
          <div class="row">
                      <div class="slide-text">
                        <h1>小清新响应式设计网站</h1>
                        <p>利用HTML5，CSS3效果、动画和bootstrap框架制作.</p>
                        <a href="#"><button class="btn-common">登录吧</button></a>
                     </div>
                      <img src="images/home/slider/hill.png" class="slider-hill" alt="slider image">
                      <img src="images/home/slider/house.png" class="slider-house" alt="slider image">
                      <img src="images/home/slider/sun.png" class="slider-sun" alt="slider image">
                      <img src="images/home/slider/birds1.png" class="slider-birds1" alt="slider image">
                      <img src="images/home/slider/birds2.png" class="slider-birds2" alt="slider image">
          </div>
        </div>
      </div>
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" id="carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" id="carousel-control2"href="#carousel-example-generic" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
    <div class="container services-content services-content-sm">
    	<div class="row">
    		<div class="col-sm-4 col-margin">
          <div class="services-img-bg"><img src=""></div>
          <h2 class="text-center">Javascript</h2>
    			<p>由实例代码我们可以知道，对象实例可以访问原型中的值，但不能重写原型中的值，如果对象实例中定义了和原型重名的属性，那么该属性就会屏蔽原型中的那个属性，但并不会重写。</p>
    		</div>
    		<div class="col-sm-4 col-margin">
          <div class="services-img-bg"><img src=""></div>
          <h2 class="text-center">Javascript</h2>
    			<p>由实例代码我们可以知道，对象实例可以访问原型中的值，但不能重写原型中的值，如果对象实例中定义了和原型重名的属性，那么该属性就会屏蔽原型中的那个属性，但并不会重写。</p>
    		</div>
    		<div class="col-sm-4 col-margin">
          <div class="services-img-bg"><img src=""></div>
          <h2 class="text-center">Javascript</h2>
    			<p>由实例代码我们可以知道，对象实例可以访问原型中的值，但不能重写原型中的值，如果对象实例中定义了和原型重名的属性，那么该属性就会屏蔽原型中的那个属性，但并不会重写。</p>
    		</div>
    	</div>		
    </div>
    <div class="container-fluid index-branner1">
        <div class="container">
          <div class="row">

            <div class="col-sm-7 col-sm-hide">
              <div class="branner1-title">
                <h2>实例代码我们可以知道</h2>
              <h3>对象实例可以访问原型中的值，但不能重写原型</h3>
              </div>
              
          </div>
            <div class="col-sm-5 text-center">
              <div class="branner1-button">
                <button>立即参与</button>
              </div>
              
            </div>
          </div>
          
        </div>
    </div>
    <div class="features features-sm">
      <div class="container">
        <div class="row">
          <div class="features-content features-content-sm">
            <div class="col-sm-5 features-img-sm-center">
              <img src="images/home/image1.png" class="img-responsive fadeInLeft" alt="">
            </div>
            <div class="col-sm-7">
              <div class="features-1-text">
                <h2>Experienced and Enthusiastic</h2>
                <p>Pork belly leberkas cow short ribs capicola pork loin. Doner fatback frankfurter jerky meatball pastrami bacon tail sausage. Turkey fatback ball tip, tri-tip tenderloin drumstick salami strip steak.</p>
              </div>
            </div>
          </div>
          <div class="features-content features-content-sm">
            <div class="col-sm-7">
              <div class="features-1-text">
                <h2>Experienced and Enthusiastic</h2>
                <p>Pork belly leberkas cow short ribs capicola pork loin. Doner fatback frankfurter jerky meatball pastrami bacon tail sausage. Turkey fatback ball tip, tri-tip tenderloin drumstick salami strip steak.</p>
              </div>
            </div>
            <div class="col-sm-5 features-img-sm-center">
              <img src="images/home/image1.png" id="features-img-sm-padding" class="img-responsive" alt="">
            </div>
          </div>
          <div class="features-content features-content-sm">
            <div class="col-sm-5 features-img-sm-center">
              <img src="images/home/image1.png" class="img-responsive" alt="">
            </div>
            <div class="col-sm-7">
              <div class="features-1-text">
                <h2>Experienced and Enthusiastic</h2>
                <p>Pork belly leberkas cow short ribs capicola pork loin. Doner fatback frankfurter jerky meatball pastrami bacon tail sausage. Turkey fatback ball tip, tri-tip tenderloin drumstick salami strip steak.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="client">
       <div class="container client-bg">
         <div class="row">
           <div class="client-icon">
             <div class="col-sm-12 text-center">
               <img src="images/home/clients.png" alt="">
             </div>
           </div>
           <div class="client-title">
             <div class="col-sm-12 text-center">
               <h2>快乐的客户端</h2>
               <p>Pork belly leberkas cow short</p>
             </div>
           </div>
           <div class="client-content">
             <div class="col-xs-3">
               <a href="#"><img src="images/home/client1.png" class="img-responsive" alt=""></a>
             </div>
             <div class="col-xs-3">
               <a href="#"><img src="images/home/client1.png" class="img-responsive" alt=""></a>
             </div>
             <div class="col-xs-3">
               <a href="#"><img src="images/home/client1.png" class="img-responsive" alt=""></a>
             </div>
             <div class="col-xs-3">
               <a href="#"><img src="images/home/client1.png" class="img-responsive" alt=""></a>
             </div>
           </div>
         </div>
       </div>
    </div>
    <div class="footer" id="footer">
      <div class="container">
        <div class="row">
          <img src="images/home/under.png" class="img-responsive" alt="">
          <div class="footer-message">
            <div class="col-sm-5">
              <div class="footer-Testimonial clearfix">
                <h3>介绍</h3>
                <div class="Testimonial-item clearfix">
                  <div class="Testimonial-img">
                    <img src="images/home/profile1.png" alt="">
                  </div>
                  <div class="Testimonial-text">
                    <p>Nisi commodo bresaola, leberkas venison eiusmod bacon occaecat labore tail.</p>
                    <h4><a href="#">- Jhon Kalis</a></h4>
                  </div>
                </div>
                <div class="Testimonial-item clearfix">
                  <div class="Testimonial-img">
                    <img src="images/home/profile2.png" alt="">
                  </div>
                  <div class="Testimonial-text">
                    <p>Nisi commodo bresaola, leberkas venison eiusmod bacon occaecat labore tail.</p>
                    <h4><a href="#">- Jhon Kalis</a></h4>
                  </div>
                </div>              
              </div>
            </div> 
            <div class="col-sm-3">
              <div class="footer-contact">
                <div class="col-sm-12">
                  <h3>联系</h3>
                  <div class="contact-item">
                    <span>E-mail: email@email.com</span><br>
                    <span>Phone: +1 (123) 456 7890 </span>
                  </div>
                </div>
              </div>
              <div class="footer-contact">
                <div class="col-sm-12">
                  <h3>地址</h3>
                  <div class="contact-item">
                    <span>Unit C2, St.Vincent's Trading Est., <br>Feeder Road, <br>Bristol, BS2 0UY <br>United Kingdom </span>
                  </div>
                </div>
              </div>
              
            </div>
            <div class="col-sm-4">
              <h3>发送信息</h3>
              <div>
                <form action="">
                  <div class="from-group from-group-margin">
                    <input type="text" name="name" class="form-control from-text-style" placeholder="姓名">
                  </div>
                  <div class="from-group from-group-margin">
                    <input type="text" name="email" class="form-control from-text-style" placeholder="邮件">
                  </div>
                  <div class="from-group from-group-margin">
                    <textarea type="text" name="message" class="form-control from-text-style from-texttarea-style"  rows="4" placeholder="输入你的信息"></textarea>
                  </div>
                  <button class="from-button">发送</button>
                </form>
                
              </div>
            </div>
          </div>
          <div class="footer-banquan">
            <div class="col-sm-12 text-center">
              <h4>
                © Your Company 2014. All Rights Reserved.
              </h4>
              <h4>
                Designed by <span>Themeum</span>
              </h4>
            </div>
          </div>
          
        </div>
      </div>
    </div>
</div>
    <script src="js/jquery.1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/public-html5.js"></script>
    <script>
     $(function(){
        var index_anim = {
          init:function(){
            this.navDropdownAnim();
            this.serach();
            this.sliderhouseAnim();
          },
          navDropdownAnim:function(){
              if( $(window).width() < 768 ){
                  $(".nav-dropdown-item").click(function(){
                    // alert(12);
                   if ($(".dropdown-hover-menu").css("display") == "none") {
                     $(".dropdown-hover-menu").show().css("position","relative").addClass("nav-dropdown-menu-anim");
                   }
                   else{
                     $(".dropdown-hover-menu").hide().removeClass("nav-dropdown-menu-anim");
                   } 
                });
              }else{
                $(".dropdown-hover-li").hover(function(){
                  if ($(".dropdown-hover-menu").css("display") == "none"){
                    $(".dropdown-hover-menu").show().addClass("nav-dropdown-menu-anim");
                  }
                  else{
                    $(".dropdown-hover-menu").hide().removeClass("nav-dropdown-menu-anim");
                  }
              });
              }  
           },
           serach:function(){
            $("#serach").click(function(){
             if ($(".serach").css("display") == "none"){
               $(".serach").show();
             }
             else{
               $(".serach").hide();
             }
            });
           },
           sliderhouseAnim:function(){
             $('.carousel').bind('swipeLeft',function(){
                $(".carousel").carousel('prev');
             });
             $('.carousel').bind('swipeRight',function(){
                $(".carousel").carousel('next');
             });
             $('.carousel').carousel({
              interval: 5000
            })
             $(".slider-hill").show().addClass("slider-anim");
             $(".slider-house").show().addClass("slider-house-anim");
             $(".slider-sun").show().addClass("slider-sun-anim");
             $(".slider-birds1").show().addClass("slider-birds1-anim");
             $(".slider-birds2").show().addClass("slider-birds2-anim");
             $(".slide-text").show().addClass("slider-text-anim");
             var sliderTime = setTimeout(function(){
                $(".slider-hill").removeClass("slider-anim");
                $(".slider-house").removeClass("slider-house-anim");
                $(".slider-sun").removeClass("slider-sun-anim");
                $(".slider-birds1").removeClass("slider-birds1-anim");
                $(".slider-birds2").removeClass("slider-birds2-anim");
                $(".slide-text").removeClass("slider-text-anim");
                 },10000)
           }
        }
        index_anim.init();
    }); 
    </script>
  </body>
</html>